<template>
  <div class="divLogin">
    <!-- 登录盒子 -->
    <div class="divContent">
      <!-- 登录盒子的左边表单部分 -->
      <div class="divLeft">
        <!-- logo -->
        <div class="divTitle">
          <img src="http://www-wms-java.itheima.net/img/title.ef005a7a.png" alt="">
        </div>
        <!-- 表单部分 -->
        <div class="loginForm">
          <el-form ref="form" :model="form" :rules="loginRules" label-width="80px" class="el-form">
            <el-form-item class="el-form-item" prop="name">
              <div class="user">
                <div class="userImg">
                  <img class="userImg_inner" src="" alt="">
                </div>
                <div class="userInput">
                  <el-input v-model="form.name" class="userInput_inner" />
                </div>
              </div>
            </el-form-item>
            <el-form-item class="el-form-item" prop="pwd">
              <div class="pwd">
                <div class="pwdImg">
                  <img class="pwdImg_inner" src="" alt="">
                </div>
                <div class="pwdInput">
                  <el-input v-model="form.pwd" class="pwdInput_inner" type="password" show-password @click="flag=!flag" />
                </div>
              </div>
            </el-form-item>
            <div class="checkbox">
              <el-form-item>
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="记住密码" name="name" />
                </el-checkbox-group>
              </el-form-item>
            </div>
          </el-form>
          <div class="loginButton">
            <el-button type="primary" class="loginButton_inner" @click="handelLogin">立即登录</el-button>
          </div>
        </div>
      </div>
      <!-- 登录盒子的右边图片部分 -->
      <div class="divRight" />
    </div>
  </div>
</template>

<script>
import { setToken } from '@/utils/auth'
export default {
  data() {
    return {
      // 表单数据
      form: {
        name: 'admin',
        pwd: '11111',
        type: [],
        // 输入框密码显示
        flag: false
      },
      // 表单校验
      loginRules: {
        name: [
          { required: true, message: '请输入账户', tigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', tigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handelLogin() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        setToken('loginlogin2')
        this.$router.push('/')
        console.log(1)
        // 放行
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.divLogin{
  background-color: #fdfafa
}
.divContent{
    width: 958px;
    height: 516px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-box-shadow: 0 0 20px rgb(93 93 93 / 33%);
    box-shadow: 0 0 20px rgb(93 93 93 / 33%);
    background-color: #fff;
    border-radius: 40px;
    }
    .divLeft{
        float: left;
        width: 398px;
        height: 516px;
        background: #fff;
        border-radius: 34px 0 0 34px;
        margin: 0 auto;
        }
        .divTitle{
            margin-left: 124px;
            margin-top: 72px;
            img{
              width: 150px;
              height: 64px;
            }
        }
        .el-form{
              display: block;
              margin-top: 22px;
              margin-left: -20px;
              margin-bottom: 22px;
              font-size: 14px;
              line-height: 36px;
              .el-form-item {
                line-height: 40px;
                font-size: 14px;
                 .user{
                  display: flex;
                  justify-content: center;
                  align-items: center;
                      .userImg{
                          width: 50px;
                          height: 50px;
                          background: #eae7e7;
                          border-radius: 8px 0 0 8px;
                      .userImg_inner{
                          width: 25px;
                          height: 24px;
                          margin: 12px 13px;
                          border-style: none;
                     }
                    }
                     .userInput{
                          font-size: 14px;
                          width: 100%;
                     .userInput_inner{
                            width: 230px;
                            height: 50px;
                            background-color: #f8f5f5;
                      }
                    }
                 }
                 .pwd{
                  display: flex;
                  justify-content: center;
                  align-items: center;
                      .pwdImg{
                          width: 50px;
                          height: 50px;
                          background: #eae7e7;
                          border-radius: 8px 0 0 8px;
                      .pwdImg_inner{
                          width: 25px;
                          height: 24px;
                          margin: 12px 13px;
                          border-style: none;
                     }
                    }
                     .pwdInput{
                          font-size: 14px;
                          width: 100%;
                     .pwdInput_inner{
                            width: 230px;
                            height: 50px;
                            background-color: #f8f5f5;
                      }
                    }
                 }
                 .checkbox{
                  margin-top: 22px;
                  margin-left: 60px;
                 }
              }
        }
        .loginButton{
          margin-top: 23px;
          margin-left: 59px;
.loginButton_inner{
      width: 280px;
      height: 50px;
      background: #ffb200;
      border-radius: 8px;
      box-shadow: 0 2px 9px 1px rgb(255 178 0 / 47%);
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      color: #332929;
      line-height: 22px;
          border: 1px solid #dcdfe6;

}
        }

.divRight{
  float: right;
  background-image: url(http://www-wms-java.itheima.net/img/contentBg.1321d126.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 560px;
  height: 516px;
}

</style>
